
import {useState,useRef} from 'react'


/**
 * 子传父： 核心思想
 *    在子组件中调用父组件中的函数并
 *    传递参数
 */

function Son(props){

  /**
   * 使用受控表单绑定进行编写代码
   */
  const [value,setValue] = useState('')

  const change = (e)=>{
    setValue(e.target.value)
  }
 
  return(
    <div>
       <input type='text' value={value}  onChange={change}/>
       <button onClick={()=>{props.onGetSonMsg(value)}}>sendMsg</button>
    </div>
  )
}







/**
 * 父亲组件
 */
function App() {



 const [msg,setMsg]=useState('')


  function getMsg(msg){
    console.log(msg)
    setMsg(msg)
  }


  return (
    <div className="App">
      <span>this is span</span> {msg}
      <Son onGetSonMsg={getMsg}
      ></Son>
    </div>
  );
}

export default App;
